    {include file="public/head"}
<style>
    .header{
        width: 100%;
    }

    .header .title{
        width: 100%;
        padding: 2rem 0 1rem 2rem;
        font-size: 1rem;
    }

    .header .centent {
        padding: 1rem 0 1rem 2rem;
        font-size: 1.5rem;
    }

    .header .centent input {
        outline: none;
        border: none;
        font-size: 1.7rem;
    }

    .list{
        width: 100%;
        height: 15.5rem;
        padding: 1rem;
    }

    .list ul:first-child{
        height: 1.5rem;
        line-height: 1.5rem;
        overflow: hidden;
    }

    .list ul:last-child{
        height: calc(100% - 1.5rem);
        overflow-y: scroll;
    }

    .list li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 2;
        font-size: 14px;
    }

    .list li span {
        width: 33.33%;
        display: inline-block;
    }

    .list li span:last-child{
        text-align: right;
    }

    .list li span:nth-child(2) {
        text-align: center;
    }

    .list .top {
        font-weight: 700;
    }

    .sub{
        width: 95%;
        background-color: #f23030;
        border: none;
        border-radius: .1rem;
        font-weight: 600;
        color:white;
        margin: 2rem 0 1rem 2.5%;
        padding: .5rem;
    }
</style>
<body>

<header class="aui-header-default aui-header-fixed aui-header-bg">
    <a href="javascript:history.back(-1)" class="aui-header-item">
        <i class="aui-icon aui-icon-back-white"></i>
    </a>
    <div class="aui-header-center aui-header-center-clear">
        <div class="aui-header-center-logo">
            <div class="aui-car-white-Typeface" style="color:black;font-weight: bold;">充值中心</div>
        </div>
    </div>
    <a href="#" class="aui-header-item-icon"   style="min-width:0">
<!--        <i class="aui-icon aui-icon-member"></i>-->
    </a>
</header>

<section class="aui-settle-content">
    <div class="header">
        <div class="title">充值金额</div>
        <div class="centent">
            <span>￥</span><input type="text" id="num" placeholder="0.00" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
        </div>
    </div>
    <div class="aui-dri"></div>
    <div class="aui-settle-choice">
        <div class="aui-settle-ways">
            选择充入余额
        </div>
        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear">
            <div class="aui-address-cell-hd">
                <img src="__STATIC__/User/img/icon/apy-1.png" alt="">
            </div>
            <div class="aui-address-cell-bd">
                钱包余额
                <p>￥{$UserInfo.balance_4}</p>
            </div>
            <div class="aui-address-cell-ft"><input type="radio" name="type" value="4" class="check check-pay goods-check goodsCheck" checked="checked"></div>
        </a>
    </div>

    <div class="aui-settle-choice">
        <div class="aui-settle-ways">
            付款方式
        </div>
        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear">
            <div class="aui-address-cell-hd">
                <img src="__STATIC__/User/img/icon/apy-1.png" alt="">
            </div>
            <div class="aui-address-cell-bd">
                银行转账
            </div>
            <div class="aui-address-cell-ft"><input type="radio" name="pay_type" value="1" class="check check-pay goods-check goodsCheck" checked="checked"></div>
        </a>

        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear bank">
            <div class="aui-address-cell-bd">
                银行名称：{$Config.bank_name}
            </div>
        </a>

        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear bank">
            <div class="aui-address-cell-bd">
                银行卡号：{$Config.bank_num}
            </div>
        </a>

        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear bank">
            <div class="aui-address-cell-bd">
                开户姓名：{$Config.bank_user}
            </div>
        </a>

        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear">
            <div class="aui-address-cell-hd">
                <img src="__STATIC__/User/img/icon/apy-5.png" alt="">
            </div>
            <div class="aui-address-cell-bd">
                微信转账
            </div>
            <div class="aui-address-cell-ft"><input type="radio" name="pay_type" value="2" class="check check-pay goods-check goodsCheck"></div>
        </a>

        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear wechat">
            <div class="aui-address-cell-bd">
                <img src="{$Config.wechat_code}" style="width: 100%">
            </div>
        </a>

        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear">
            <div class="aui-address-cell-hd">
                <img src="__STATIC__/User/img/icon/apy-4.png" alt="">
            </div>
            <div class="aui-address-cell-bd">
                支付宝转账
            </div>
            <div class="aui-address-cell-ft"><input type="radio" name="pay_type" value="3" class="check check-pay goods-check goodsCheck"></div>
        </a>

        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear ali">
            <div class="aui-address-cell-bd">
                <img src="{$Config.ali_code}" style="width: 100%">
            </div>
        </a>
    </div>


    <div class="aui-settle-choice">
        <div class="aui-settle-ways">
            支付凭证
        </div>
        <a href="javascript:" class="aui-address-cell  aui-fl-arrow-clear">
            <div class="aui-address-cell-bd">
                <label for="voucher_url">
                    <img id="m_voucher_url" src="__STATIC__/User/img/icon/upLoad.png" style="margin: auto;width: 10rem;height: 10rem" alt="">
                    <input type="file" id="voucher_url" class="upload_pic" style="display: none;">
                </label>
            </div>
        </a>
    </div>

    <input type="submit" class="sub" value="确认充值">
    <div class="list">
        <ul class="top">
            <li>
                <span>金额</span>
                <span>时间</span>
                <span>状态</span>
            </li>
        </ul>
        <ul>
            {volist name="RechargeList" id="v"}
            <li>
                <span>{$v.num}</span>
                <span>{$v.add_time|date="m-d H:i",###}</span>
                {if condition="$v.status eq 0"}<span style="color:silver">待处理</span>
                {elseif condition="$v.status eq 1"}<span style="color:green">已通过</span>
                {elseif condition="$v.status eq 2"}<span style="color:red">已驳回</span>
                {/if}
            </li>
            {/volist}
        </ul>
    </div>
</section>
<script type="text/javascript" src="__STATIC__/User/js/jquery.min.js"></script>
<script>
    $(function () {
        $(".bank").show();
        $(".wechat").hide();
        $(".ali").hide();

        $("input[name='pay_type']").on("click",function () {
            var pay_type = $("input[name='pay_type']:checked").val();
            if(pay_type == 1){
                $(".bank").show();
                $(".wechat").hide();
                $(".ali").hide();
            }

            if(pay_type == 2){
                $(".bank").hide();
                $(".wechat").show();
                $(".ali").hide();
            }

            if(pay_type == 3){
                $(".bank").hide();
                $(".wechat").hide();
                $(".ali").show();
            }

        })




        //ajax异步图片上传
        $('.upload_pic').change(function(){
            //图片对象
            let that = $(this);
            var formData = new FormData();
            formData.append("image", that[0].files[0]);

            // 上传设置
            $.ajax({
                // 规定把请求发送到那个URL
                url: "{:url('User/forUpload')}",
                type: "post",            // 请求方式
                dtaType: 'json',
                data: formData,//传值就传fd对象了
                processData:false,  //告诉jQuery不要处理数据
                contentType: false,  //告诉jQuery不要设置contentType
                // 请求成功时执行的回调函数
                success: function (data) {
                    if(data.status == 1)
                    {
                        that.prev().attr('src',data.message);
                    }
                    else
                    {
                        alert(data.message);
                    }
                }
            });
        });

        //提交
        $(".sub").on('click',function () {
            var num = $("#num").val();
            var type = $("input[name='type']:checked").val();
            var voucher_url = $("#m_voucher_url").attr("src");

            if(num <= 0 || num ==""){
                alert('请输入充值金额');
                return false;
            }

            if(voucher_url == "/static/User/img/icon/upLoad.png"){
                alert('请上传支付凭证');
                return false;
            }

            $.ajax({
                type:"POST",
                url:"{:url('User/UserRecharge')}",
                data:{
                    num:num,
                    type:type,
                    voucher_url:voucher_url,
                },
                dataType:"json",
                success:function(data){
                    if(data.status == 1){
                        alert(data.message);
                        window.location.href="{:url('User/Index')}";
                    }else{
                        alert(data.message);
                    }
                }
            })
        })
    })
</script>
</body>
</html>